<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback" id="main"></MyNav>



		<scroll-view scroll-y="true" class="contentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollInner">


				<view class="contentTop">

					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">上下班次数</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft" v-if="workTime.checkShifts=='oneCherk'">1次上下班</text>

							<view class="">
								<uni-icons type="down" size="14"></uni-icons>
							</view>


						</view>

					</view>


					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">上班打卡时间</text>

						</view>

						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChangeGoWorkTime">

							<view class="contentItemRightContent">
								<text class="contentItemTextLeft">{{workTime.goWorkTime}}</text>

								<view class="">
									<uni-icons type="down" size="14"></uni-icons>
								</view>


							</view>

						</picker>

					</view>


					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">下班打卡时间</text>

						</view>
						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChangeOffWorkTime">
							<view class="contentItemRightContent">
								<text class="contentItemTextLeft">{{workTime.offWorkTime}}</text>

								<view class="">
									<uni-icons type="down" size="14"></uni-icons>
								</view>


							</view>
						</picker>
					</view>


					<view class="contentItem2" @click="communityTimeSetting()">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">上下班规则设置</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">已设置</text>

							<view class="">
								<uni-icons type="right" size="14"></uni-icons>
							</view>


						</view>

					</view>


				</view>

				<view class="contentCenter">


					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">开启休息时间</text>

						</view>

						<view class="contentItemRightContent" @click="OpenOrClose()">
							<!-- workTime.isOpenRest  1:开启 0:关闭 -->
							<image v-show="workTime.isOpenRest=='1'" src="/static/clock/dakai.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

							<image v-show="workTime.isOpenRest=='0'" src="/static/clock/guanbi.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


						</view>

					</view>

					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">开始时间</text>

						</view>
						<picker mode="time" :value="time" start="00:00" end="23:59"
							@change="bindTimeChangeopenStartTime">
							<view class="contentItemRightContent">
								<text class="contentItemTextLeft">{{workTime.openStartTime}}</text>

								<view class="">
									<uni-icons type="down" size="14"></uni-icons>
								</view>


							</view>
						</picker>
					</view>


					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">结束时间</text>

						</view>
						<picker mode="time" :value="time" start="00:00" end="23:59" @change="bindTimeChangeOpenEndTime">
							<view class="contentItemRightContent">
								<text class="contentItemTextLeft">{{workTime.openEndTime}}</text>

								<view class="">
									<uni-icons type="down" size="14"></uni-icons>
								</view>


							</view>
						</picker>
					</view>


				</view>





				<view class="contentCenter">


					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">自动统计加班工时</text>

						</view>

						<view class="contentItemRightContent" @click="TimeOpenOrClose()">
							<!-- workTime.isWorkOverTime  1:开启 0:关闭 -->
							<image v-show="workTime.isWorkOverTime=='1'" src="/static/clock/dakai.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

							<image v-show="workTime.isWorkOverTime=='0'" src="/static/clock/guanbi.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


						</view>

					</view>

					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">
								下班多少分钟后开始计入加班</text>

						</view>
<!--						<picker mode="selector" :range="seconds" :value="time"-->
<!--							@change="bindTimeChangeOffWorkOverTime">-->
<!--						</picker>-->
            <view class="contentItemRightContent">
              <view class="contentItemTextLeft" style="display: flex;justify-content: center;align-items: center;">
                <image style="display: flex;width: 50rpx;height: 50rpx;" src="/static/clock/jianqu.png" mode="scaleToFill" @click="">
                </image>
                <input type="number" style="width: 70rpx;margin-left: 20rpx;margin-right: 20rpx" v-model="workTime.offWorkOverTime" />
                <image style="display: flex;width: 50rpx;height: 50rpx;" src="/static/clock/zengjia.png" mode="scaleToFill">
                </image>
              </view>

<!--              <view class="">-->
<!--                <uni-icons type="down" size="14"></uni-icons>-->
<!--              </view>-->


            </view>
					</view>


					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">

								加班少于多少分钟不计入加班</text>

						</view>
<!--						<picker mode="selector" :range="seconds" :value="time"-->
<!--							@change="bindTimeChangeOffWorkLessOverTime">-->
<!--						</picker>-->
            <view class="contentItemRightContent">
              <view class="contentItemTextLeft" style="display: flex;justify-content: center;align-items: center;">
                <image style="display: flex;width: 50rpx;height: 50rpx;" src="/static/clock/jianqu.png" mode="scaleToFill">
                </image>
                <input type="number" style="width: 70rpx;margin-left: 20rpx;margin-right: 20rpx" v-model="workTime.offWorkLessOverTime" />
                <image style="display: flex;width: 50rpx;height: 50rpx;" src="/static/clock/zengjia.png" mode="scaleToFill">
                </image>
              </view>
            </view>

					</view>


				</view>



			</view>
		</scroll-view>






		<view class="contentBottom" id="mainBottom">
			<!-- 自己计算下 上班时间到下班时间 减去中间休息时间 -->
			<text class="contentBottomTime">总工时:7小时30分</text>
			<text class="contentBottomButtom" @click="workTimeUpdate()">确定</text>
		</view>





		<!-- 点击上下班规则设置-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">
				<text class="bagDetailUpadte">上下班规则设置</text>

				<view class="bagDetailTop">

					<view class="bagDetailTopTop">
						<text class="bagDetailTopTopText">上班晚多少分钟记为迟到</text>
						<view class="bagDetailTopTopRight">
							<image class="bagDetailTopTopRightImg" src="/static/clock/jianqu.png" mode="scaleToFill">
							</image>
<!--							<text class="bagDetailTopTopRightText">{{workTime.goWorkLastTime}}</text>-->
              <input type="number" style="width: 70rpx;" v-model="workTime.goWorkLastTime" />
							<image class="bagDetailTopTopRightImg" src="/static/clock/zengjia.png" mode="scaleToFill">
							</image>
						</view>
					</view>

					<view class="bagDetailTopTop">
						<text class="bagDetailTopTopText">下班早多少分钟记为早退</text>
						<view class="bagDetailTopTopRight">
							<image class="bagDetailTopTopRightImg" src="/static/clock/jianqu.png" mode="scaleToFill">
							</image>
<!--							<text class="bagDetailTopTopRightText">{{workTime.offWorkEarlyTime}}</text>-->
              <input type="number" style="width: 70rpx;" v-model="workTime.offWorkEarlyTime" />
							<image class="bagDetailTopTopRightImg" src="/static/clock/zengjia.png" mode="scaleToFill">
							</image>
						</view>
					</view>

				</view>



				<view class="bagDetailTop">

					<view class="bagDetailTopTop">
						<text class="bagDetailTopTopText">上班晚多少分钟记为缺卡</text>
						<view class="bagDetailTopTopRight">
							<image class="bagDetailTopTopRightImg" src="/static/clock/jianqu.png" mode="scaleToFill">
							</image>
<!--							<text class="bagDetailTopTopRightText">{{workTime.goWorkCardTime}}</text>-->
              <input type="number" style="width: 70rpx;" v-model="workTime.goWorkCardTime" />
							<image class="bagDetailTopTopRightImg" src="/static/clock/zengjia.png" mode="scaleToFill">
							</image>
						</view>
					</view>

					<view class="bagDetailTopTop">
						<text class="bagDetailTopTopText">下班早多少分钟记为缺卡</text>
						<view class="bagDetailTopTopRight">
							<image class="bagDetailTopTopRightImg" src="/static/clock/jianqu.png" mode="scaleToFill">
							</image>
<!--							<text class="bagDetailTopTopRightText">{{workTime.offWorkCardTime}}</text>-->
              <input type="number" style="width: 70rpx;" v-model="workTime.offWorkCardTime" />
							<image class="bagDetailTopTopRightImg" src="/static/clock/zengjia.png" mode="scaleToFill">
							</image>
						</view>
					</view>

				</view>



				<view class="bagDetailTop">

					<view class="bagDetailTopTop">
						<text class="bagDetailTopTopText">最早提前多少分钟打卡</text>
						<view class="bagDetailTopTopRight">
							<image class="bagDetailTopTopRightImg" src="/static/clock/jianqu.png" mode="scaleToFill">
							</image>
<!--							<text class="bagDetailTopTopRightText">{{workTime.goWorkBeforTime}}</text>-->
              <input type="number" style="width: 70rpx;" v-model="workTime.goWorkBeforTime" />
							<image class="bagDetailTopTopRightImg" src="/static/clock/zengjia.png" mode="scaleToFill">
							</image>
						</view>
					</view>

					<view class="bagDetailTopTop">
						<text class="bagDetailTopTopText">最晚延迟多少分钟打卡</text>
						<view class="bagDetailTopTopRight">
							<image class="bagDetailTopTopRightImg" src="/static/clock/jianqu.png" mode="scaleToFill">
							</image>
<!--							<text class="bagDetailTopTopRightText">{{workTime.offWorkAfterTime}}</text>-->
              <input type="number" style="width: 70rpx;" v-model="workTime.offWorkAfterTime" />
							<image class="bagDetailTopTopRightImg" src="/static/clock/zengjia.png" mode="scaleToFill">
							</image>
						</view>
					</view>

				</view>




				<text class="ContentButton" @click="workTimeUpdate">确定</text>


			</view>
		</uni-popup>





	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
	import {
		workTimeUpdate
	} from "@/pages/api/api.js";


	export default {
		components: {
			MyNav,
			bgImage,

		},
		data() {
			return {
				title: '上下班时间',
				isback: true,
				// 开启休息时间
				DeviceSwitch: false,

				// 自动统计加班工时
				TimeDeviceSwitch: false,

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
				workTime: {},
        seconds: [],
			}
		},
		onLoad: function(option) {
			this.workTime = JSON.parse(decodeURIComponent(option.workTime));
			console.log('上下班时间设置',this.workTime);
      for (let i = 0; i < 60; i++) {
        this.seconds.push(i);
      }
		},
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 80
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},
		methods: {
			//上班打卡时间 选择时间
			bindTimeChangeGoWorkTime(e) {
				console.log('上下班打卡时间', e.detail.value);
				this.workTime.goWorkTime = e.detail.value
			},
			//下班打卡时间 选择时间
			bindTimeChangeOffWorkTime(e) {

				this.workTime.offWorkTime = e.detail.value
			},

			//休息开始时间选择时间
			bindTimeChangeopenStartTime(e) {

				this.workTime.openStartTime = e.detail.value
			},
			//休息结束时间 选择时间
			bindTimeChangeOpenEndTime(e) {

				this.workTime.openEndTime = e.detail.value
			},


			//下班多少分钟后开始计入加班选择时间
			bindTimeChangeOffWorkOverTime(e) {

				this.workTime.offWorkOverTime = e.detail.value
			},
			//加班少于多少分钟不计入加班 选择时间
			bindTimeChangeOffWorkLessOverTime(e) {

				this.workTime.offWorkLessOverTime = e.detail.value
			},

			// 上下班规则设置
			communityTimeSetting() {
				this.open()
			},

			// 打开弹框
			open() {
				// console.log('点了');
				this.$refs.popupBag.open('bottom')

			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},

			// 开启休息时间
			OpenOrClose() {
				// this.DeviceSwitch = !this.DeviceSwitch
				if (this.workTime.isOpenRest == 1) {
					this.workTime.isOpenRest = 0
				} else {
					this.workTime.isOpenRest = 1
				}
			},

			// 自动统计加班工时
			TimeOpenOrClose() {
				// this.TimeDeviceSwitch = !this.TimeDeviceSwitch
				if (this.workTime.isWorkOverTime == 1) {
					this.workTime.isWorkOverTime = 0
				} else {
					this.workTime.isWorkOverTime = 1
				}
			},
			workTimeUpdate() {
				workTimeUpdate(this.workTime).then(res => {
					if (res.code == 200) {
						// 显示提示信息
						uni.showToast({
							title: '保存成功！',
							icon: 'none'
						});

						uni.navigateTo({
              url: '/subPack/clockIn/commutingSettings/commutingSettings?workTime='+encodeURIComponent(JSON.stringify(this.workTime)),
						});
					} else {
						// 显示提示信息
						uni.showToast({
							title: res.msg,
							icon: 'error'
						});
					}
				})
			}

		}
	}
</script>

<style>
	.ContentButton {

		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;

		display: flex;
		justify-content: center;
		align-items: center;



		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	.bagDetailTopTopRightText {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		line-height: 30rpx;
	}

	.bagDetailTopTopRightImg {
		display: flex;
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.bagDetailTopTopRight {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bagDetailTopTopText {
		display: flex;


		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;

		margin-left: 30rpx;
	}

	.bagDetailTopTop {
		display: flex;
		justify-content: space-between;
		align-items: center;

		width: 100%;
	}

	.bagDetailTop {

		width: 690rpx;
		height: 240rpx;
		background: #F5F7F9;
		border-radius: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-bottom: 30rpx;
	}

	.lineBg1 {
		width: 100%;
		height: 20rpx;
		background: #EEEEEE;
	}

	.bagDetailCancel {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;



	}

	.bagDetailDelete {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: red;

	}

	.bagDetailUpadte {
		width: 100%;
		height: 120rpx;

		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 20rpx 20rpx 0 0; */
		/* background-color: white; */
	}

	.bagDetail {
		width: 750rpx;
		height: 1073rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;


		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


	}


	.ContentScrollInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.contentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-top: 30rpx;
		height: 600rpx;
	}


	.contentBottomButtom {

		display: flex;
		align-items: center;
		justify-content: center;
		width: 250rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;

		margin-left: 30rpx;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;
	}

	.contentBottomTime {

		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;

		display: flex;
		align-items: center;
	}

	.contentBottom {

		position: absolute;
		bottom: 0;
		width: 750rpx;
		height: 140rpx;
		background: #FFFFFF;

		display: flex;
		justify-content: center;
		align-items: center;

		margin-top: 30rpx;
	}

	.contentCenter {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		width: 690rpx;
		height: 360rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}

	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItemRightContentSwitchImg {
		display: flex;

		width: 80rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
	}

	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-bottom: #F9FCFF solid 1rpx;

		/* background-color: aqua; */
	}


	.contentTop {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;

		width: 690rpx;
		height: 480rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
	}
</style>
